<template>
    <div class="py-[60px]">
        <Title title="五步定制，精准营养" desc="FIVE STEP, PRECISE NUTRITION" />
        <div
            class="steps w-[1200px] mx-auto flex justify-between items-start mt-[50px] gap-[73px]"
        >
            <div
                v-for="(item, index) in stepList"
                :key="index"
                class="step-item flex-1 text-center"
            >
                <div class="step-item-num text-[28px] font-bold text-[#4CAF50] animate-trigger" ref="animateElements">
                    {{ item.num }}
                </div>
                <div class="step-item-icon w-[80px] h-[80px] mx-auto my-[12px]">
                    <img
                        :src="item.icon"
                        :alt="item.title"
                        class="w-full h-full"
                    />
                </div>
                <div class="step-item-title text-[18px] font-500 mb-[12px] animate-trigger" ref="animateElements">
                    {{ item.title }}
                </div>
                <div
                    class="step-item-desc text-[14px] text-[#666] leading-[22px] max-w-[200px] mx-auto"
                >
                    {{ item.desc }}
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Title } from './index'
import { useAnimation } from '@/composables/useAnimation'

import step_1 from '../../assets/images/home/step_1.png'
import step_2 from '../../assets/images/home/step_2.png'
import step_3 from '../../assets/images/home/step_3.png'
import step_4 from '../../assets/images/home/step_4.png'
import step_5 from '../../assets/images/home/step_5.png'

interface StepItem {
    num: string
    icon: string
    title: string
    desc: string
}

const stepList: StepItem[] = [
    {
        num: '01',
        icon: step_1,
        title: '科学检测',
        desc: '临床检测/基因检测/功能医学检测/专业健康评估系统'
    },
    {
        num: '02',
        icon: step_2,
        title: '精准分析',
        desc: '多学科专家团队专业解读/权威医学专家深度解析/AI智能在线评估/健康数据精准分析'
    },
    {
        num: '03',
        icon: step_3,
        title: '个性定制',
        desc: '千人千方，精准定制/专属营养方案/健康饮食方案/科学运动方案'
    },
    {
        num: '04',
        icon: step_4,
        title: '动态调整',
        desc: '随需而变，动态优化/健康状况监测/及时调整方案/持续追踪效果'
    },
    {
        num: '05',
        icon: step_5,
        title: '拥抱健康',
        desc: '补充细胞营养/修复受损细胞/提升器官功能/焕活年轻态'
    }
]

const { animateElements } = useAnimation()

// 暴露一个方法给父组件使用
defineExpose({
    getAnimateElements: () => animateElements.value
})
</script>

<style lang="less" scoped>
.animate-trigger {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.animate-in {
    opacity: 1;
    transform: translateY(0);
}
</style>
